<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			ul,
			ol {
				list-style: none;
			}
			
			.nav {
				width: 736px;
				height: 78px;
				border: 1px solid #f00;
				margin: 50px auto;
			}
			
			.nav li {
				float: left;
			}
			
			.nav li a {
				display: block;
				width: 100px;
				height: 78px;
				background: url(img/nav.png) no-repeat left top;
				text-indent: -9999px;
				overflow: hidden;
			}
			
			.nav li a:hover {
				background-image: url(img/nav-on.png);
			}
			
			.nav .list2 a {
				width: 124px;
				background-position: -100px;
			}
			
			.nav .list3 a {
				width: 146px;
				background-position: -224px;
			}
			
			.nav .list4 a {
				width: 120px;
				background-position: -370px;
			}
			
			.nav .list5 a {
				width: 124px;
				background-position: -490px;
			}
			
			.nav .list6 a {
				width: 122px;
				background-position: -614px;
			}
		</style>
	</head>

	<body>

		<ul class="nav">
			<li class="list1">
				<a href="#">首页</a>
			</li>
			<li class="list2">
				<a href="#">首页</a>
			</li>
			<li class="list3">
				<a href="#">首页</a>
			</li>
			<li class="list4">
				<a href="#">首页</a>
			</li>
			<li class="list5">
				<a href="#">首页</a>
			</li>
			<li class="list6">
				<a href="#">首页</a>
			</li>
		</ul>

	</body>

</html>